<template>
  <div class="homeBox">
    <!-- 个人信息 -->
    <img style="position: absolute;width: 100%;left: 50%;transform: translateX(-50%);top: -14px;z-index: -1;border-radius: 20px;" src="../../assets/image/user_background.png" alt="">
    <div class="title">我的</div>
    <div class="userInfo">
      <div class="Info flex col-center mt180">
        <img
          src="../../assets/image/home/newHome.png"
          alt=""
          class="wh60 mr-10"
        />
        <div class="infoList">
          <div class="name font-w-7 font-17">{{userStore.userInfo.nickName}}</div>
          <div class="phone mt-5 font-14">{{userStore.userInfo.phonenumber}}</div>
        </div>
      </div>
    </div>
    <!-- cellList -->
    <div class="cellList">
      <van-cell :title="item.name" icon="label-o" is-link :to="item.router" v-for="item in cellList" :key="item.name"></van-cell>
    </div>

    <div class="logout" @click="logout">
      <div>退出登录</div>
    </div>

    <!-- 底部导航栏 -->
    <bottomNav :routerName="route.name"></bottomNav>
  </div>
</template>

<script setup>
import { ref } from "vue";
import bottomNav from "@/components/bottomNav/index.vue";
import { useRoute,useRouter } from "vue-router";
import { useUserStore } from "@/stores/user";
import { showConfirmDialog } from 'vant';

const route = useRoute();
const router = useRouter();
const userStore = useUserStore();

const cellList = ref([
  {
    name: '房屋信息',
    router: '/homeList'
  },
  {
    name: '装修备案',
    router:'/renovation'
  },
  {
    name: '出租信息',
    router:'/rental'
  },
  {
    name: '违建投诉',
    router:'/complaint'
  }
])

const logout = () => {
  showConfirmDialog({
  title: '确认退出登录吗？',
}).then(() => {
    // on confirm
    //清除登录储存的数据
    // sessionStorage.removeItem("token");
    //跳转到登录页
    router.push("/login");
  }).catch(() => {
    // on cancel
  });
}



</script>

<style lang="scss" scoped>
.homeBox {
  width: 100%;
  height: 100vh !important;
  margin: 0;
  background: no-repeat;
  background-image: url(../../assets/image/home/topBg.png);
  background-size: 100%;
  overflow: hidden;
  .title {
    position: absolute;
    top: 50px;
    left: 50%;
    transform: translateX(-50%);
    font-family: Microsoft YaHei;
    font-size: 16px;
    color: #fff;
  }
}
.mt180 {
  margin-top: 180px !important;
}
.userInfo {
  width: 100vw;
  padding: 15px;
  padding-bottom: 0px;
  .Info {
    width: 100%;
    border-radius: 10px;
    margin-top: 30px;
    background: #ffffff;
    padding: 15px;
    .wh60 {
      width: 60px;
      height: 60px;
    }
  }
}
.cellList {
  padding: 5px;
  margin: 15px;
  border-radius: 15px;
  background: #ffffff;
}

.logout {
  padding: 15px;
  margin: 15px;
  border-radius: 15px;
  background: #ffffff;
  text-align: center;
  font-size: 16px;
}

::v-deep .van-cell__left-icon{
  font-size: 30px !important;
}

.van-cell{
  padding: 20px;
}
</style>